<template>
  <!-- 全局导航栏-->
  <div id="globalHeader">
    <a-row :wrap="false">
      <a-col flex="200px">
        <!--跳转到主页-->
        <router-link to="/">
          <div class="title-bar">
            <img src="../assets/logo.ico" alt="logo" class="logo" />
            <div class="title">云图库</div>
          </div>
        </router-link>
      </a-col>
      <a-col flex="auto">
        <a-menu
          v-model:selectedKeys="current"
          mode="horizontal"
          :items="menuItems"
          @click="doMenuClick"
        />
      </a-col>
      <a-col flex="150px">
        <div class="user-login-status">
          <div v-if="loginUserStore.isLogin">
            <a-dropdown>
              <div>
                <a-avatar
                  shape="square"
                  size="small"
                  :src="loginUserStore.loginUser.userAvatar"
                ></a-avatar>
                {{ loginUserStore.loginUser.userAccount ?? '游客' }}
              </div>
              <template #overlay>
                <a-menu>
                  <a-menu-item>
                    <router-link to="/my_space">
                      <UserOutlined />
                      我的空间
                    </router-link>
                  </a-menu-item>
                  <a-menu-item @click="doLogout">
                    <LoginOutlined />
                    退出登录
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </div>
          <div v-else>
            <a-button type="primary" href="/login">登录</a-button>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { useLoginUserStore } from '@/stores/useLoginUserStore.ts'
import { LoginOutlined, UserOutlined } from '@ant-design/icons-vue'
import { myRouters } from '@/router'
import checkRole from '@/router/CheckAccess.ts'

const loginUserStore = useLoginUserStore()
const router = useRouter()
const current = ref<string[]>([router.currentRoute.value.path])

// 定义一个响应式的菜单项列表
const menuItems = computed(() => {
  return generateMenuItems(myRouters)
})

const generateMenuItems = (routes, basePath = '') => {
  return routes
    .filter((route) => {
      if (
        route.meta?.showMenu &&
        checkRole(loginUserStore.loginUser, route.meta?.access, `${route.path}`)
      ) {
        return true
      }
      return false
    })
    .map((route) => {
      const fullPath = basePath ? `${basePath}/${route.path}` : route.path

      const menuItem = {
        key: fullPath,
        label: route.name as string,
        icon: route.meta?.icon ? () => route.meta.icon() : undefined,
        children:
          route.children && route.children.length > 0
            ? generateMenuItems(route.children, fullPath) // 传递父路径给递归调用
            : undefined,
      }

      if (!menuItem.children || menuItem.children.length === 0) {
        delete menuItem.children
      }

      return menuItem
    })
}

// 每次路由调整后的钩子
router.afterEach((to) => {
  if (to.path !== '/others') {
    current.value = [to.path] // 设置当前选中的菜单项
  }
})

const doMenuClick = ({ item, key }) => {
  router.push(key)
}

const doLogout = async () => {
  loginUserStore.logout()
  await router.push('/')
}

onMounted(() => {
  // 确保在初次加载时执行一次检查
  current.value = [router.currentRoute.value.path]
})
</script>

<style scoped>
#globalHeader .title-bar {
  display: flex;
  align-items: center;
}

.title {
  color: black;
  font-size: 18px;
  margin-left: 16px;
}
</style>
